<!DOCTYPE html>
<html>
<head>
<title>城市测试</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">

</head>

<body>
	<div>
		省份: <select id="area" name="area">
			<option value="0">======请选择省份=====</option>
		</select> 城市: <select id="areaplus" name="areaplus">
			<option value="0">======请选择所在城市==</option>
		</select>
	</div>
</body>

<script type="text/javascript">

	window.onload = function() {

		var areaEle = document.getElementById("area");
		var areaplusEle = document.getElementById("areaplus");
		var xmlHttpRequest = null;
		// 创建xmlHttpRequest对象
		create();
		// 加载所有的省份信息
		loadProvinces();
		areaEle.addEventListener("change", function(e) {
			clearCities();
			var aid = this.value;
			xmlHttpRequest.open("post", "provinceServlet/loadAllCities?aid=" + aid);
			xmlHttpRequest.send(null);
			// 异步请求验证
			xmlHttpRequest.onreadystatechange = function() {
				// 判断是否正确接收
				if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
					var content = xmlHttpRequest.responseXML; // 直接获取DOM对象,操作DOM
					var cities = content.getElementsByTagName("city");
					for (var i = 0; i < cities.length; i++) {
						var citynode = cities.item(i);
						var cityEle = document.createElement("option");
						cityEle.setAttribute("value", citynode.childNodes.item(0).textContent);
						cityEle.textContent = citynode.childNodes.item(2).textContent;
						areaplusEle.appendChild(cityEle);
					}
				}

			}

		}, false);

		// 创建Ajax对象
		function create() {
			if (window.XMLHttpRequest) {
				// 说明是非IE浏览器
				xmlHttpRequest = new XMLHttpRequest();
			} else {
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
			}
		}

		// 加载所有的省份
		function loadProvinces() {
			xmlHttpRequest.open("post", "provinceServlet/loadAllProvince");
			xmlHttpRequest.send(null);
			// 异步请求验证
			xmlHttpRequest.onreadystatechange = function() {
				// 判断是否正确接收
				if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
					var content = xmlHttpRequest.responseXML; // 直接获取DOM对象,操作DOM
					var provinces = content.getElementsByTagName("province");
					for (var i = 0; i < provinces.length; i++) {
						var pronode = provinces.item(i);
						var proEle = document.createElement("option");
						proEle.setAttribute("value", pronode.childNodes.item(0).textContent);
						proEle.textContent = pronode.childNodes.item(1).textContent;
						areaEle.appendChild(proEle);
					}

				}

			}

		}

		// 清除数据
		function clearCities() {

			// 每次点击加载的时候清除之前的所有的数据，读出所有的tr, 只要属性中存在dept-*的id属性就干掉
			var cityEles = areaplusEle.getElementsByTagName("option");
			var len = cityEles.length;
			// 循环删除
			for (var i = 0; i < len; i++) {
				var citynode = cityEles.item(1);
				if (citynode) {
					areaplusEle.removeChild(citynode);
				}
			}

		}

	}
</script>



</html>
